<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./dist/index.min.js"></script>
        <style>
            /* .left-0 {
                left: 0;
            }
            .absolute {
                position: absolute;
            }
            .top-0 {
                top: 0;
            }
            .opacity-0 {
                opacity: 0;
            }
            .z-100 {
                z-index: 100;
            }
            .ripple {
                transition:
                    transform 0.2s cubic-bezier(0.68, 0.01, 0.62, 0.6),
                    opacity 0.14s linear;
                will-change: transform, opacity;
            }
            .pointer-events-none {
                pointer-events: none;
            }
            .bg-current {
                background: currentColor;
            }
            #root {
                position: relative;
                width: 200px;
                height: 200px;
                margin: 100px auto;
                background-color: antiquewhite;
            }
            .insert-node {
                position: fixed;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 10;
            }
            #hidden-target {
                position: fixed;
                z-index: 10000;
                background-color: aliceblue;
            } */
        </style>
    </head>
    <body>
        <div id="root">
            <!-- <div id="insert-target" style="height: 100vh; margin-bottom: 100px">插入元素</div> -->
            <!-- <img
                style="height: 200px"
                crossorigin="anonymous"
                data-id="img"
                data-src="https://t11.baidu.com/it/u=2337937152,202539343&fm=30&app=106&f=JPEG?w=312&h=208&s=CDD27A855CDA07D0DE48A11D030080C3"
                alt=""
            /> -->
            <!-- <div id="hidden-target">隐藏元素</div> -->
        </div>

        <script>
            // const img = document.querySelector('[data-id]')
            // this.esyTools.imgLazyloadScroll((e) => {
            //     console.log(e)
            // })
            // const root = document.getElementById('root')
            // const canvas = document.createElement('canvas')
            // const ctx = canvas.getContext('2d')
            // ctx.roundRect
            // root.onmousedown = this.tools.createRipple(root);
            // root.onmouseup = removeRipple;
            // root.onclick = () => {
            //     const insertTarget = document.createElement('div')

            //     insertTarget.style.cssText = 'width:100px;height:100px;background:red;opacity:0;'
            //     console.log(this.esyTools)
            //     const contians = this.esyTools.getRoot()

            //     contians.appendChild(insertTarget)
            //     this.esyTools.animateFn(
            //         insertTarget,
            //         this.esyTools.APPEAR_ANIMATION,
            //         this.esyTools.ANIMATION_TIME
            //     ).onfinish = function () {
            //         console.log('动画完成')
            //     }
            // }
            // const hiddenTarget = document.getElementById('hidden-target')
            // insertTarget.onclick = () => {
            //     const insertNode = document.createElement('div')
            //     insertNode.classList.add('insert-node')
            //     hiddenTarget.onclick = insertElement(insertNode, true)
            // }
        </script>
    </body>
</html>
